<template>
	<view class="sa_content">
		<view class="go_Reset">
			<view class="go_search">
				<image :src="HTTP_IMG_UTL+'go_seracth.png'" style="width: 30rpx;height: 30rpx;" />
				<input @confirm="handeleSearch" style="margin-left: 6rpx;" type="text" v-model="inputValue"
					:placeholder="$t('请输入您想要查找的内容')">
			</view>
		</view>
		<!-- 无数据提示 -->
		<view v-if="isShow" style="color: 999999;margin-top: 30rpx;" >{{$t('暂无信息')}}</view>
		<view @click="handeleDetail(item)" class="list_block" v-for="(item,index) in list" :key="index">
			<view style="width: 100%;height: 81rpx;display: flex;align-items: center;">
				<image :src="setImage(item.user.avatar)" mode="" style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"></image>
				<view style="width: 80%;height: 60rpx;display: flex;flex-direction: column;margin-left: 20rpx;">
					<view class="username">{{lang==='zh'?item.user.username:item.user.username_ru}}</view>
					<view style="width: 31rpx;height: 21rpx;">
						<image v-if="item.country=='0'" :src="HTTP_IMG_UTL+'zone_001681@4x.png'" mode="" style="width: 40rpx;height: 30rpx;"></image>
						<image v-if="item.country=='1'" :src="HTTP_IMG_UTL+'zone_002680@4x.png'" mode="" style="width: 40rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 1rpx;background-color: #D8D8D8;margin-top: 20rpx;"></view>
			
			<view style="width: 100%;height:216rpx;display: flex;">
				<view style="width: 50%;height: 216rpx;display: flex;flex-direction: column;">
					
					<view v-if="item.human_type==='1'" style="margin-top: 26rpx;font-size: 30rpx;width: 300rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">{{lang==='zh'?item.goods_name:item.goods_name_ru}}</view>
					<view v-if="item.human_type==='2'" style="margin-top: 26rpx;">
						
						<view style="font-size: 26rpx;height: 70rpx;">{{lang==='zh'?item.goods_name:item.goods_name_ru}}</view>
					</view>
					<view v-if="item.human_type==='2'" style="font-size: 50rpx;font-weight: 800;color: #DE4023;">{{item.desire_price}}/kg</view>
					<!-- human_type:"1" 1是货源信息  2是快递-->
					<view style="margin-top: 8rpx;" v-if="item.human_type==='1'">
						<u-tag 
						v-if="item.goods_volume && item.goods_volume_ru" 
						size="mini" bg-color="#54D441" 
						:text="lang==='zh'?item.goods_volume+'m³' :item.goods_volume_ru+'m³'" type="success" mode="dark" style="margin-left: 12rpx;"/>
					</view>
					<view style="margin-top: 5rpx;" v-if="item.human_type==='1'">
						<u-tag 
						v-if="item.load_num && item.load_num_ru" 
						size="mini" 
						bg-color="#378BFD" 
						:text="lang==='zh'?item.load_num+'kg':item.load_num_ru+'kg'" type="success" mode="dark"/>
					</view>
					<view style="width: 198rpx;height: 50rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;">
						<image v-if="item.departure_country==='0'" :src="HTTP_IMG_UTL+'zone_001681@4x.png'" mode="" style="width: 66rpx;height: 48rpx;"></image>
						<image v-if="item.departure_country==='1'" :src="HTTP_IMG_UTL+'zone_002680@4x.png'" mode="" style="width: 66rpx;height: 48rpx;"></image>
						<image :src="HTTP_IMG_UTL+'2014919@4x.png'" mode="" style="width: 42rpx;height: 24rpx;"></image>
						<image v-if="item.reach_country==='0'" :src="HTTP_IMG_UTL+'zone_001681@4x.png'" mode="" style="width: 66rpx;height: 48rpx;"></image>
						<image v-if="item.reach_country==='1'" :src="HTTP_IMG_UTL+'zone_002680@4x.png'" mode="" style="width: 66rpx;height: 48rpx;"></image>
					</view> 
				</view>
				<image v-if="item.human_type==='1'" src="https://app.gluz.com.cn/uniappAssets/transportIcon2.png" mode="" style="width: 177rpx;height: 177rpx;margin-top: 30rpx;margin-left: 100rpx;"></image>
				<image v-if="item.human_type==='2'" src="https://app.gluz.com.cn/uniappAssets/transportIcon2.png" mode="" style="width: 177rpx;height: 177rpx;margin-top: 30rpx;margin-left: 100rpx;"></image>
			</view>
			
			<view style="width: 100%;height: 52rpx;display: flex;margin-top: 20rpx;align-items: center;">
				<image :src="HTTP_IMG_UTL+'one_11565@4x.png'" mode="" style="width: 52rpx;height: 52rpx;"></image>
				<view style="width: 90%;height: 52rpx;display: flex;flex-direction: column;justify-content: space-between;margin-left: 12rpx;">
					<view style="font-size: 22rpx;">{{$t('出发城市')}}</view>
					<view style="font-size: 20rpx;">{{$t(item.hyd)}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 52rpx;display: flex;margin-top: 20rpx;align-items: center;">
				<image :src="HTTP_IMG_UTL+'one44_568@4x.png'" mode="" style="width: 52rpx;height: 52rpx;"></image>
				<view style="width: 90%;height: 52rpx;display: flex;flex-direction: column;justify-content: space-between;margin-left: 12rpx;">
					<view style="font-size: 22rpx;">{{$t('目的城市')}}</view>
					<view style="font-size: 20rpx;" >{{$t(item.shd)}}</view>
				
				</view>
			</view>
			               
			<view style="margin-top: 34rpx;font-size: 30rpx;">{{$t('运输方式')}}</view> 
			
			<image v-if="item.mode === '汽运'" src="https://app.gluz.com.cn/uniappAssets/huowuPic1.png" mode=""  style="width: 197rpx;height: 100rpx;margin-top: 40rpx;"></image>
			<image v-if="item.mode === '空运'" src="https://app.gluz.com.cn/uniappAssets/huowuPic8.png" mode=""  style="width: 197rpx;height: 100rpx;margin-top: 40rpx;"></image>
			<image v-if="item.mode === '海运'" src="https://app.gluz.com.cn/uniappAssets/huowuPic6.png" mode=""  style="width: 197rpx;height: 100rpx;margin-top: 40rpx;"></image>
			<image v-if="item.mode === '火车'" src="https://app.gluz.com.cn/uniappAssets/huowuPic7.png" mode=""  style="width: 197rpx;height: 100rpx;margin-top: 40rpx;"></image>
			
			<view style="width: 100%;height: 67rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
				<view 
				@click.stop="handeleJingpai(item)"
				style="width: 307rpx;height: 67rpx;font-size: 24rpx;border-radius: 12rpx;display: flex;align-items: center;justify-content: center;background: linear-gradient(0deg, #000000, #000000), #D8D8D8;color: #FFFFFF;">
					{{jb()}}
				</view>
				<view 
				@click.stop="handeleGoutong(item)"
				style="width: 307rpx;height: 67rpx;font-size: 24rpx;border-radius: 12rpx;display: flex;align-items: center;justify-content: center;background: linear-gradient(102deg, #FF8C7B 15%, #FFD1A2 99%), #D8D8D8;color: #FFFFFF;">
					{{$t('即时沟通')}}
				</view>
			</view>
		</view>
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	export default {
		components:{
			vipPopup
		},
		data() {
			return {
				HTTP_IMG_UTL,
				isShow:false,
				IMGURL: '', //图片地址
				inputValue: '', //输入框内容
				pages: {
					page:1,
					searchKey:''
				}, //页面传参数据
				list: [], //数据
				scrollTop: 0,
				enabled: true,
				refresh: false,
				lang: 'zh',
				vip:false,
				vipShow: false,	
			}
		},
		onLoad(option) {
			this.pages = JSON.parse(option.data)
			// 获取列表数据
			this.getData()
			// 图片地址url前缀
			this.IMGURL = IMAGE_URL
			// 获取语言
			this.getLang()
		},
		// 触底加载数据
		onReachBottom(){
			console.log('加载数据');
			this.pages.page++
			this.getData()
		},
		methods: {
			// 跳转至详情
			handeleDetail(item){
				console.log('human_type:',item.human_type);
				 // human_type:"1" 1是货源信息  2是快递
				// uni.navigateTo({
				// 	url:'/pages/index/detail/trDetail3?id='+item.id+'&type='+this.pages.type+'&releaseType='+'transport'
				// })
				 if(item.human_type===1){
				 	uni.navigateTo({
				 		url:'/pages/index/detail/trDetail1?id='+item.id+'&type='+this.pages.type+'&releaseType='+'transport'
				 	})
				 }else{
				 	uni.navigateTo({
				 		url:'/pages/index/detail/trDetail3?id='+item.id+'&type='+this.pages.type+'&releaseType='+'transport'
				 	})
				 }
			},
			// 参与竞拍
			handeleJingpai(item){
				// 先判断手机号，如果使自己手机号，自己不能和参与
				var mobile = uni.getStorageSync('mobile');
				
				if (mobile === item.user.mobile) {
					this.$u.toast(this.$t('不能参与自己'));
					return 
				}
				this.$u.api.user.order_join_day_auth({
					lang:this.lang
				}).then(res => {
					if(res==1){
						//参与竞标
						uni.navigateTo({
								url:'/pages/order/process/buildOrder?type='+"transport"+'&release_id=' +item.id
						})
					}else{
						if(this.vip){
							this.vipShow = true
							return
						}else{
							uni.showModal({
								content: this.$t('您的权限不足哦!请联系工作人员!'),
								showCancel: false,
								confirmText: this.$t('是'),
							})
							return false;
						}
						return
					}
				})
			},
			// 即时沟通
			handeleGoutong(item){
				createC2CConversation(item.user.mobile,this)
			},
			setImage(IMAGE){
				if(IMAGE.slice(-3)==='png' || IMAGE.slice(-3)==='jpg'){
					return this.IMGURL+IMAGE
				}else{
					return IMAGE
				}
			},
			
			// 即时沟通
			handeleConver(item){
				createC2CConversation(item.user.mobile, this)
			},
			// 上拉刷新
			handeleScrolltolower() {
				// this.pages.page = this.pages.page+1
				this.pages.page++
				// console.log('this.pages:',this.pages.page++ );
				this.pages.searchKey = this.inputValue
				this.getData()
			},
			// 下拉刷新
			handeleRefresherrefresh() {
				this.inputValue = ''
				this.pages={
					type:this.pages.type,
					page:1,
					release_type:'',
					departure_country:'',
					reach_country:'',
					whole_diffuse:'',
					mode:'',
					departure_city:'',
					reach_city:'',
					car_category_id:'',
					searchKey:''
				}
				
				this.getData()
				this.refresh = true
			},
			handeleSearch() {
				this.pages.page = 1
				this.pages.searchKey = this.inputValue
				this.getData()
			},
			// 获取列表数据
			getData() {
				uni.showLoading({
					title: '加载中...',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				this.$u.api.collection.getTransportList(this.pages).then(res => {
					if(this.pages.page==1 && res.length==0){
						this.isShow = true
					}else {
						this.isShow = false
					}
					if(this.pages.page === 1){
						this.list = res
					}else {
						this.list = [...this.list,...res]
					}
					this.refresh = false
					uni.hideLoading();
					
				}).catch(err=>{
					uni.hideLoading();
				})
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("运输列表")
			})
		},
		onPullDownRefresh() {
		
				uni.stopPullDownRefresh()
			
		}
	}
</script>

<style lang="scss" scoped>
	.username{
		width: 550rpx;
		height: 50rpx;
		text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
		    white-space: nowrap;
	}
	.list_departure_country {
		width: 90%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.list_whole_diffuse {
		font-size: 20rpx;
		padding: 6rpx 22rpx;
		background-color: #54CEE3;
		color: #ffffff;
		border-radius: 8rpx;
		margin-right: 9rpx;
	}

	.list_load_num {
		font-size: 20rpx;
		padding: 6rpx 20rpx;
		background-color: #378BFD;
		color: #ffffff;
		border-radius: 8rpx;
		margin-right: 9rpx;
	}

	.list_goods_volume {
		font-size: 20rpx;
		padding: 6rpx 13rpx;
		background-color: #54D441;
		color: #ffffff;
		border-radius: 8rpx;
	}

	.list_category_name {
		width: 300rpx;
		height: 50rpx;
		text-align: end;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		font-size: 26rpx;
	}

	.list_communicate_model {
		width: 320rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.list_communicate {
		padding: 14rpx 16rpx;
		background-color: #000000;
		color: #ffffff;
		font-size: 20rpx;
		border-radius: 9rpx;
		margin-top: 20rpx;
	}

	.list_bottom {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.list_right {
		font-size: 26rpx;
		color: #A4A4A4;
		width: 112rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 30rpx;
	}

	.list_block_top {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: red;
	}

	.list_block {
		width: 690rpx;
		min-height: 825rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 16rpx;
	}

	.items_top {
		width: 650rpx;
		height: 30rpx;
		background-color: blue;
	}

	.ant_list_items {
		width: 690rpx;
		min-height: 244rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 90rpx);
	}

	.list_block {
		width: calc(100% - 60rpx);

	}

	.go_Reset {
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.go_search {
		border-radius: 34rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.sa_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background: #F6F6F6;
	}
</style>